
<script>

// import LoginPage from "@/components/loginPage.vue";
const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

// import RegisteredPage from "@/components/registeredPage.vue";
import axios from "axios";

export default {
  name: "headerPage",
  // components: {RegisteredPage},
  // components: {LoginPage},
  data() {
    return {
      userInfo:{},
      sj:'',
      logon: false,
      visible: false,
      visible1: false,
      lhc:{},

      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  beforeCreate1() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    // 普通登录
    normalLogin(){

    },
    // 退出登录
    signOut(){
      axios.get('/api/pcUser/logout').then(res => {
        console.log(res)
        if (res.code === 0) {
          this.logon = false
        }
      })
    },
    // 获取验证码
    getPhone(){

      this.form.validateFields((err, values) => {
            if (!err) {
              axios.get('/api/pcUser/register/send/code/'+values.phone).then(res => {
                console.log(res)

              })
            }
      })

    },
    showModal1() {
      this.visible1 = true;
    },
    handleOk1(e) {
      console.log(e);
      this.visible1 = false;
    },


    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 登录
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          axios.post('/api/pcUser/login',{
            username:values.userName,
            password:values.password,
            rememberMe:true,
          },{
            headers:{'content-type':'application/x-www-form-urlencoded'}
          }).then(res=> {
            console.log(res)
            if (res.data.code === 0) {
              this.visible = false
              this.logon = true
              this.userInfo = res.userInfo;

            }
          })
        }
      });
    },
    // 注册
    handleSubmit1(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('我是李宏昌 ', values);
          this.sj=values.phone
          axios.post('/api/pcUser/register',{
            loginName:values.confirm,
            code:values.captcha,
            mobile:values.phone,
            password:values.password,
            nickname:values.nickname,

          },{
            headers:{'content-type':'application/x-www-form-urlencoded'}
          }).then(res=> {
            console.log(res)


          })
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
      }
      this.autoCompleteResult = autoCompleteResult;
    },

  },
  created() {
    axios.get('/api/pcUser/login-user/info').then(res => {
      console.log('111',res)

      if(res.data.code === 0) {
        this.logon = true
        this.userInfo = res.data;
        console.log(res.data)
        console.log(this.userInfo)
      }
    })
  }
}

</script>

<template>
<div>
  <div class="box">
    <div class="title-img"><img src="../assets/touobucenter.png" alt=""></div>

   <div class="w">
     <!--    导航栏-->
       <div class="box1">
         <div class="navigationBar">
           <div><a href="#">首页</a></div>
           <div>
             <a-dropdown>
               <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                 课程分类<a-icon type="down" />
               </a>
               <a-menu slot="overlay">
                 <a-menu-item>
                   <a href="javascript:;">1st menu item</a>
                 </a-menu-item>
                 <a-menu-item>
                   <a href="javascript:;">2nd menu item</a>
                 </a-menu-item>
                 <a-menu-item>
                   <a href="javascript:;">3rd menu item</a>
                 </a-menu-item>
               </a-menu>
             </a-dropdown>
           </div>
           <div><a href="#">教学管理云平台</a></div>
         </div>
<!--         搜索栏-->
         <div class="searchQ">
           <div>
             <a-input-search placeholder="" enter-button />
           </div>
           <button class="gouWu"></button>
<!--           <button class="dengLu">登录/注册</button>-->
           <a-button class="denglu" type="primary" @click="showModal" v-if="!logon">
             登录/注册
           </a-button>
           <a-dropdown v-else>
             <a class="ant-dropdown-link" @click="e => e.preventDefault()">
               <a-avatar :src="userInfo.data.avatarUrl" />
<!--               <img :src="userInfo.data.avatarUrl" alt="" width="100px" height="100px">-->
               {{userInfo.data.nickname}}
             </a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a href="javascript:;">1st menu item</a>
               </a-menu-item>
               <a-menu-item>
                 <router-link to="/geren">个人中心</router-link>

               </a-menu-item>
               <a-menu-item>
                <button @click="signOut">退出登录</button>
               </a-menu-item>
             </a-menu>
           </a-dropdown>
           <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
            <diV>
              <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="账号登录">
                  <a-form
                      id="components-form-demo-normal-login"
                      :form="form"
                      class="login-form"
                      @submit="handleSubmit"
                  >
                    <a-form-item>
                      <a-input
                          v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                          placeholder="Username"
                      >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-input
                          v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                          type="password"
                          placeholder="Password"
                      >
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-checkbox
                          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
                      >
                        记住我
                      </a-checkbox>
                      <a class="login-form-forgot" href="">
                       忘记密码
                      </a>
                      <a-button type="primary" html-type="submit" class="login-form-button" @click="normalLogin">
                        登录
                      </a-button>
                      <a-button type="primary" @click="showModal1">
                        注册
                      </a-button>
                      <a-modal v-model="visible1" title="Basic Modal" @ok="handleOk1">
                        <a-form :form="form" @submit="handleSubmit1">
                          <a-form-item v-bind="formItemLayout" label="账号">
                            <a-input
                                v-decorator="[
          'email',
          {
            rules: [
              {

                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          },
        ]"
                            />
                          </a-form-item>

                          <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
                            <a-input
                                v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
                                type="password"
                            />
                          </a-form-item>
                          <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
                            <a-input
                                v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
                                type="password"
                                @blur="handleConfirmBlur"
                            />
                          </a-form-item>
                          <a-form-item v-bind="formItemLayout">
      <span slot="label">
        称昵&nbsp;
        <a-tooltip title="What do you want others to call you?">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
                            <a-input
                                v-decorator="[
          'nickname',
          {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          },
        ]"
                            />
                          </a-form-item>

                          <a-form-item v-bind="formItemLayout" label="手机号">
                            <a-input
                                v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          },
        ]"
                                style="width: 100%"
                            >
                              <a-select
                                  slot="addonBefore"
                                  v-decorator="['prefix', { initialValue: '86' }]"
                                  style="width: 70px"
                              >
                                <a-select-option value="86">
                                  +86
                                </a-select-option>
                                <a-select-option value="87">
                                  +87
                                </a-select-option>
                              </a-select>
                            </a-input>
                          </a-form-item>

                          <a-form-item
                              v-bind="formItemLayout"
                              label="验证码"

                          >
                            <a-row :gutter="8">
                              <a-col :span="12">
                                <a-input
                                    v-decorator="[
              'captcha',
              { rules: [{ required: true, message: 'Please input the captcha you got!' }] },
            ]"
                                />
                              </a-col>
                              <a-col :span="12">
                                <a-button  @click="getPhone">获取验证码</a-button>
                              </a-col>
                            </a-row>
                          </a-form-item>
                          <a-form-item v-bind="tailFormItemLayout">
                            <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                              记住我
                              <a href="">

                              </a>
                            </a-checkbox>
                          </a-form-item>
                          <a-form-item v-bind="tailFormItemLayout">
                            <a-button type="primary" html-type="submit">
                              注册
                            </a-button>
                          </a-form-item>
                        </a-form>
                      </a-modal>
                    </a-form-item>
                  </a-form>
                </a-tab-pane>
                <a-tab-pane key="2" tab="手机号登录" force-render>
                  <a-form-item  label="Phone Number">
                    <a-input
                        v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          },
        ]"
                        style="width: 100%"
                    >
                      <a-select
                          slot="addonBefore"
                          v-decorator="['prefix', { initialValue: '86' }]"
                          style="width: 70px"
                      >
                        <a-select-option value="86">
                          +86
                        </a-select-option>
                        <a-select-option value="87">
                          +87
                        </a-select-option>
                      </a-select>
                    </a-input>
                  </a-form-item>
                  <a-form-item

                      label="Captcha"
                      extra="We must make sure that your are a human."
                  >
                    <a-row :gutter="8">
                      <a-col :span="12">
                        <a-input
                            v-decorator="[
              'captcha',
              { rules: [{ required: true, message: 'Please input the captcha you got!' }] },
            ]"
                        />
                      </a-col>
                      <a-col :span="12">
                        <a-button>Get captcha</a-button>
                      </a-col>
                    </a-row>
                  </a-form-item>
                  <a-button type="primary" html-type="submit" class="login-form-button">
                    登录
                  </a-button>
                </a-tab-pane>

              </a-tabs>
            </diV>
           </a-modal>
         </div>
       </div>
   </div>
  </div>
</div>
</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.w {
  width: 1200px;
  margin: 0 auto;
}
.box {
  width: 100%;
  height: 300px;
  background-image: url("@/assets/beijing.png");
  margin: 0 auto;
}
.title-img {
text-align: center;
}
.title-img img {
  margin-top: 20px;
}
.box1{
  display: flex;
  justify-content: space-between;
}
.navigationBar {
  display: flex;
  margin-top: 100px;
}
.navigationBar div {
  margin-left: 20px;
  font-size: 20px;
}
.navigationBar div a{
  color: white;
}
.gouWu{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background-color: white;
  margin-left: 30px;
  box-shadow: 10px 10px 10px grey;
  margin-top: -5px;
}
.dengLu{
  width: 100px;
  height: 30px;
  border-radius: 20px;

  border: none;
  background-color: white;
  float: right;
  color:black;
  box-shadow: 10px 10px 10px grey;
  margin-left: 15px;
}
.searchQ{
  display: flex;
  margin-top: 100px;
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>